<template>
  <input
      type="date"
      :value="formattedValue"
      @input="handleInput"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
      class="cell-input cell-date"
  />
</template>

<script>
export default {
  name: 'CellDate',
  props: {
    modelValue: {
      type: [String, Event],
      default: ''
    }
  },
  emits: ['update:modelValue', 'focus', 'blur'],
  computed: {
    formattedValue() {
      return this.modelValue instanceof Event ? '' : this.modelValue;
    }
  },
  methods: {
    handleInput(event) {
      const newValue = event.target.value;
      console.log('CellDate input:', newValue);
      this.$emit('update:modelValue', newValue);
    }
  }
}
</script>
<style scoped>
.cell-date {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
